// 页面数据操作
import { computed } from 'vue'
import { useEditStore } from '@/store'
import { ElMessage } from 'element-plus'
import { deepClone } from '@/libs/tools'
import { createComponentAttr } from '@/libs/edit'
import useFeature from '@/libs/feature'
import getWidgetListFlat from '@/libs/edit/getWidgetListFlat'
import customTopNavData from '@/components/edit/template-data/widget-data/custom-top-nav'

export default function usePage() {
    const editStore = useEditStore()

    const {
        isHasFeature
    } = useFeature()

    const appData = computed(() => editStore.appData)
    const cataData = computed(() => editStore.cataData)
    const style = computed(() => editStore.style)
    // 首页路由名称
    const homePageRouter = computed({
        get: () => appData.value.data['homepage-router'],
        set: val => appData.value.data['homepage-router'] = val
    })
    // 当前页面路由
    const pageId = computed({
        get: () => editStore.pageId,
        set: val => editStore.pageId = val
    })

    // 自定义页面列表
    const customPageData = computed(() => cataData.value.data)

    // 自定义页面总数
    const customPageNums = computed(() => {
        let num = 0
        customPageData.value.forEach(item => num += item.pages.length)
        return num
    })
    // 自定义页面分组总数
    const customPageGroupNums = computed(() => customPageData.value.length)

    // 删除自定义页面分组
    const onDeleteCustomPageGroup = index => {
        if (customPageGroupNums.value === 1) {
            ElMessage({
                message: '至少保留一个分组',
                type: 'warning'
            })
            return
        }
        const pages = customPageData.value[index].pages
        if ((customPageNums.value === pages.length) && pages.length > 0) {
            ElMessage({
                message: '至少保留一个页面',
                type: 'warning'
            })
            return
        }
        if (pages.some(item => item.router === pageId.value)) {
            pageId.value = customPageData.value.find((n, i) => (n.pages.length > 0) && (i !== index)).pages[0].router
        }
        if (pages.some(item => item.router === homePageRouter.value)) {
            homePageRouter.value = customPageData.value.find((n, i) => (n.pages.length > 0) && (i !== index)).pages[0].router
        }
        pages.forEach(item => delete appData.value[item.router])
        customPageData.value.splice(index, 1)
    }

    const onSetPageId = router => {
        pageId.value = router
    }
    // 添加自定义页面
    const onAddCustomPage = pageGroupIndex => {
        const pageName = `新页面${customPageData.value[pageGroupIndex].pages.length + 1}`
        const routerName = `page${++cataData.value['max-page-index']}`
        const {
            navigationBarBackgroundColor,
            navigationBarTextStyle,
            backgroundTextStyle,
            windowBackgroundColor
        } = style.value

        // 自定义顶部导航栏
        const customTopNav = deepClone(customTopNavData)
        createComponentAttr(customTopNav) // 添加控件id属性
        customTopNav.eles.customFeature.title = pageName
        customTopNav.eles.customFeature.style.color = navigationBarTextStyle
        customTopNav.eles.customFeature.style['background-color'] = navigationBarBackgroundColor

        // 新增的页面数据
        const addPageData = {
            router: routerName,
            eles: [
                customTopNav
            ],
            customFeature: {
                "name": pageName,
                "pullRefresh": true, // 下拉刷新
                "titleBackgroundColor": navigationBarBackgroundColor, // 字体背景颜色
                "titleColor": navigationBarTextStyle, // 字体颜色 黑和白
                "backgroundTextStyle": backgroundTextStyle, // 下拉加载样式 dark/light
                "windowBackgroundColor": windowBackgroundColor, // 窗口背景颜色 (下拉刷新的背景颜色)
                "background-image": "", // 背景图片
                "background-color": "", // 背景颜色
                "needLogin": false, // 是否登录
                "bindPhone": false, // 绑定手机号
                "appRole": "0", // 查看权限 0所有用户 1特定角色用户
                "appRoleData": [ // 特定角色用户列表
                    // {
                    //     "role_name": "", // 用户名
                    //     "id": ""
                    // }
                ],
                "share": false, // 开启分享设置
                "share_title": "", // 分享标语 (share为true有效)
                "share_img": "" // 分享图片 (share为true有效)
            }
        }
        appData.value[routerName] = addPageData
        customPageData.value[pageGroupIndex].pages.push({
            name: pageName,
            router: routerName
        })
    }
    // 复制自定义页面
    const onCopyCustomPage = (pageGroupIndex, pageItem) => {
        const clonePageData = deepClone(appData.value[pageItem.router])
        const cloneCataPageData = deepClone(pageItem)
        const clonePageName = `${cloneCataPageData.name}-副本`
        const cloneRouterName = `page${++cataData.value['max-page-index']}`
        const clonePageWidgetFlat = getWidgetListFlat(clonePageData.eles)
        // 重新赋值控件ID
        Object.values(clonePageWidgetFlat).forEach(item => {
            createComponentAttr(item.widgetData)
        })
        clonePageData.router = cloneRouterName
        clonePageData.customFeature.name = clonePageName
        cloneCataPageData.name = clonePageName
        cloneCataPageData.router = cloneRouterName
        appData.value[cloneRouterName] = clonePageData
        customPageData.value[pageGroupIndex].pages.push(cloneCataPageData)
    }
    // 删除自定义页面
    const onDeleteCustomPage = (pageGroupIndex, pageIndex) => {
        if (customPageNums.value === 1) {
            ElMessage({
                message: '至少保留一个页面',
                type: 'warning'
            })
            return
        }
        const pages = customPageData.value[pageGroupIndex].pages
        const { router } = pages[pageIndex]
        delete appData.value[router]
        pages.splice(pageIndex, 1)
        if (router === pageId.value) {
            pageId.value = customPageData.value.find(item => item.pages.length > 0).pages[0].router
        }
        if (router === homePageRouter.value) {
            homePageRouter.value = customPageData.value.find(item => item.pages.length > 0).pages[0].router
        }
    }

    return {
        appData,
        cataData,
        homePageRouter,
        pageId,
        customPageData,

        onSetPageId,
        onAddCustomPage,
        onDeleteCustomPageGroup,
        onCopyCustomPage,
        onDeleteCustomPage
    }
}